|
目录
一、前言二、代码示例HTML代码CSS 代码JavaScript 代码
总结
一、前言
这里将会简单介绍一下如何使用vue.js简单实现轮播图的功能
二、代码示例
HTML代码
CSS 代码
.slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slider-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slider-item.active {
opacity: 1;
}
.slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.slider-nav-item {
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.slider-nav-item.active {
background-color: #f00;
}
JavaScript 代码
new Vue({
el: '#app',
data: {
items: [
'https://picsum.photos/id/1018/1000/400',
'https://picsum.photos/id/1015/1000/400',
'https://picsum.photos/id/1019/1000/400',
],
currentIndex: 0,
},
mounted() {
setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.items.length;
}, 3000);
},
methods: {
changeIndex(index) {
this.currentIndex = index;
},
},
});
总结
这个示例中，我们使用了 Vue.js 的数据绑定功能来实现轮播图的切换。在 mounted 钩子函数中，我们使用 setInterval 函数来定时更新 currentIndex 变量，从而实现轮播图的自动切换。同时，我们还实现了一个 changeIndex 方法，用于响应用户点击导航按钮的事件，从而切换到对应的轮播图。
|